<template>
    <l-data-panel 
        :label="data.label"
        >
        <l-echarts ref="main" :option="option" ></l-echarts>
    </l-data-panel>
</template>
<script>
export default {
    props: ['data','isPreview','isShow'],
    data () {
        return {
            option: {
                legend: {
                    data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                        { name: '销售（Sales）', max: 6500},
                        { name: '管理（Administration）', max: 16000},
                        { name: '信息技术（Information Technology）', max: 30000},
                        { name: '客服（Customer Support）', max: 38000},
                        { name: '研发（Development）', max: 52000},
                        { name: '市场（Marketing）', max: 25000},
                        { name: '研发1（Development）', max: 52000},
                        { name: '市场2（Marketing）', max: 25000}
                    ]
                },
                series: [{
                    type: 'radar',
                    data: [
                        {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: '预算分配（Allocated Budget）'
                        },
                        {
                            value: [5000, 14000, 28000, 26000, 42000, 21000],
                            name: '实际开销（Actual Spending）'
                        }
                    ]
                }]
            }
        }
    },


    computed:{
        height(){
            return this.data.h
        },
        width(){
            return this.data.w
        }
    },
    watch:{
        isShow(){
            setTimeout(() => {
                this.$refs.main.updateChart()
            }, 100);
        },
        height(){
            this.$refs.main.updateChart()
        },
        width(){
            this.$refs.main.updateChart()
        }
        
    },

    mounted(){
        //this.$refs.main.update( )
    },
    methods:{
    }
}
</script>

